<template>
  <el-card class="box-card">
    <template #header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="出库计划单">
          <el-input v-model="formInline.deliveryNo" placeholder="请输入出库计划单" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请选择状态" clearable>
            <el-option :label="item.name" :value="item.value" v-for="(item,index) in counter.deliveryStatus" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划出库日期">
          <DatePicker v-model="formInline.plannedDate"></DatePicker>
        </el-form-item>
        <el-form-item label="客户">
          <selectCustomer v-model="formInline.customersName" val="customersName"></selectCustomer>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="dialogVisible=true" plain>新增</el-button>
          <el-button @click="init">重置</el-button>
        </el-form-item>
      </el-form>
    </template>

    <el-table :data="tableData.rows">
      <el-table-column prop="deliveryNo" label="出库计划单" align="center" min-width="150">
        <template #default="scope">
          <el-button type="primary" text @click="proxy.$utils.toLink(`/delivery/deliveryPlanDetails?id=${scope.row.id}`)">{{scope.row.deliveryNo}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="出库类型">
        <template #default="scope">
          {{counter.idString_format("deliveryType",scope.row.deliveryType)}}
        </template>
      </el-table-column>
      <el-table-column prop="plannedDate" label="计划出库日期" width="160" align="center" />
      <el-table-column label="状态">
        <template #default="scope">
          {{counter.idString_format("deliveryStatus",scope.row.status)}}
        </template>
      </el-table-column>
      <el-table-column prop="customersName" label="客户" min-width="160" align="center" />
      <el-table-column prop="settlementCustomersName" label="结算客户" min-width="160" align="center" />
      <el-table-column prop="deliveryAddress" label="收货地址" min-width="250" align="center" />
      <el-table-column prop="totalWeight" label="总重量(KG)" width="100" align="center" />
      <el-table-column prop="totalVolume" label="总体积(m³)" width="100" align="center" />
      <el-table-column prop="remark" label="备注" width="250" align="center" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createTime" label="创建时间" width="160" align="center" />
      <el-table-column label="操作" fixed="right" width="200" align="center">
        <template #default="scope">
          <el-button type="primary" text @click="handClick(scope.row,1)">编辑</el-button>
          <el-button type="primary" text @click="handClick(scope.row,2)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-dialog v-model="dialogVisible" title="新增/编辑计划单" width="70%" :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="formEl" label-width="120">
        <!-- <el-form-item label="出库计划单">
          <el-input v-model="formInline.user" placeholder="请输入出库计划单" clearable />
        </el-form-item> -->
        <el-form-item label="计划出库日期" prop="plannedDate">
          <DatePicker v-model="form.plannedDate"></DatePicker>
        </el-form-item>
        <el-form-item label="客户" prop="customersSn">
          <selectCustomer v-model="form.customersSn" val="customersSn"></selectCustomer>
        </el-form-item>
        <el-form-item label="结算客户" prop="settlementCustomersSn">
          <selectCustomer v-model="form.settlementCustomersSn" val="customersSn"></selectCustomer>
        </el-form-item>
        <el-form-item label="总重量(KG)">
          <el-input v-model="form.totalWeight" placeholder="请输入总重量(KG)" clearable>
            <template #append>KG</template>
          </el-input>
        </el-form-item>
        <el-form-item label="总体积(m³)">
          <el-input v-model="form.totalVolume" placeholder="请输入总体积(m³)" clearable>
            <template #append>m³</template>
          </el-input>
        </el-form-item>
        <el-form-item label="出库类型">
          <el-select v-model="form.deliveryType" placeholder="请选择出库类型" clearable>
            <el-option :label="item.name" :value="item.value" v-for="(item,index) in counter.deliveryType" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联调拨单" v-if="form.deliveryType=='transfer'" prop="relateNo">
          <selectTransfer v-model="form.relateNo" val="transferSn"></selectTransfer>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="form.deliveryAddress" :autosize="{ minRows: 4 }" type="textarea" placeholder="请输入收货地址" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" :autosize="{ minRows: 4 }" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">
            确 认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import { onMounted } from "vue";
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
let loading = ref(false);
let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  deliveryNo: "",
  deliveryType: "",
  relateNo: "",
  plannedDate: "",
  status: "",
  customersSn: "",
  customersName: "",
  settlementCustomersSn: "",
  settlementCustomersName: "",
});
let form = ref({
  remark: "",
  deliveryType: "",
  relateNo: null,
  plannedDate: "",
  customersSn: "",
  settlementCustomersSn: "",
  deliveryAddress: "",
  totalWeight: "",
  totalVolume: "",
});
let tableData = ref({});
let dialogVisible = ref(false);
let rules = ref({
  plannedDate: [{ required: true, message: "请选择出库日期", trigger: "blur" }],
  customersSn: [{ required: true, message: "请选择客户", trigger: "blur" }],
  relateNo: [{ required: true, message: "请选择关联调拨单", trigger: "blur" }],
  settlementCustomersSn: [
    { required: true, message: "请选择结算客户", trigger: "blur" },
  ],
});

//生命周期
onMounted(() => {
  search();
});

let search = () => {
  formInline.value.page = 1;
  getInfo();
};
let getInfo = async () => {
  tableData.value = await proxy.$apis.deliveryPlanList(formInline.value);
};
let handleClose = () => {
  form.value = {
    remark: "",
    deliveryType: "",
    relateNo: null,
    plannedDate: "",
    customersSn: "",
    settlementCustomersSn: "",
    deliveryAddress: "",
    totalWeight: "",
    totalVolume: "",
  };
  proxy.$refs.formEl.resetFields();
  init();
  dialogVisible.value = false;
};
let init = () => {
  formInline.value = {
    pageNum: 1,
    pageSize: 10,
    deliveryNo: "",
    deliveryType: "",
    relateNo: "",
    plannedDate: "",
    status: "",
    customersSn: "",
    customersName: "",
    settlementCustomersSn: "",
    settlementCustomersName: "",
  };
  getInfo();
};
let submitForm = async () => {
  await proxy.$refs.formEl.validate((valid, fields) => {
    if (valid) {
      save();
    } else {
      for (let key in fields) {
        return proxy.$utils.showToast(fields[key][0].message, 0);
      }
    }
  });
};
let save = async () => {
  try {
    loading.value = true;
    if (form.value.id) {
      await proxy.$apis.deliveryPlanPut(form.value);
    } else {
      await proxy.$apis.deliveryPlanAdd(form.value);
    }
    proxy.$utils.showToast("操作成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
let handClick = async (row, num) => {
  switch (num) {
    case 1:
      let { data } = await proxy.$apis.deliveryPlanDetail(row.id);
      form.value = proxy.$utils.formatFunction(data, { ...form.value });
      form.value.id = data.id;
      dialogVisible.value = true;
      break;
    case 2:
      let resp = await proxy.$utils.confirmTips("是否确定取消?");
      if (!resp) return;
      await proxy.$apis.deliveryPlanCancel({ id: row.id });
      proxy.$utils.showToast("操作成功");
      init();
      break;
    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
}
</style>
